<template>
	<div style="display: flex;flex-direction: column;" class="otherPage corporateOverview companyCulture">
		<Header :selected="3"></Header>
		<div class="bannerArea">
			<div class="banner" :style="bgImg? 'background:url('+bgImg+') no-repeat;background-size:cover;':''">
			</div>
		</div>
		<Navigation v-loading="loading" :items="breadcrumbItems" :menus="menus" :checked="4" :bgColor="bgColor">
		</Navigation>
		<div class="content">
			<div class="content_bg"
				style=" display: flex;align-items: center; justify-content: center;overflow: hidden;  ">
				<div class="companyCultureArea"
					style=" display: flex;  align-items: center; justify-content: center;  ">
					<div class="companyCultureImgArea">
						<img :src="data.coverImage" style="width: 100%;height:100%; object-fit:fill;" />
					</div>
					<div class="companyCultureContent">

						<div class="row">
							<div class="rowtitle">
								{{data.titleOne}}
							</div>

							<div v-html="data.contentOne?data.contentOne.replace(/\r\n/g, '<br/>'):''" class="rowcontent">

							</div>

						</div>
						<div class="row">
							<div class="rowtitle">
								{{data.titleTwo}}
							</div>
							<div v-html="data.contentTwo?data.contentTwo.replace(/\r\n/g, '<br/>'):''" class="rowcontent">

							</div>
						</div>
						<div class="row">
							<div class="rowtitle">
								{{data.titleThree}}
							</div>
							<div v-html="data.contentThree?data.contentThree.replace(/\r\n/g, '<br/>'):''" class="rowcontent">

							</div>
						</div>
						<div class="row">
							<div class="rowtitle">
								{{data.titleFour}}
							</div>
							<div v-html="data.contentFour?data.contentFour.replace(/\r\n/g, '<br/>'):''" class="rowcontent">
						
							</div>
						</div>				<div class="row">
							<div class="rowtitle">
								{{data.titleFive}}
							</div>
							<div v-html="data.contentFive?data.contentFive.replace(/\r\n/g, '<br/>'):''" class="rowcontent">

							</div>
						</div>				<div class="row">
							<div class="rowtitle">
								{{data.titleSix}}
							</div>
							<div v-html="data.contentSix?data.contentSix.replace(/\r\n/g, '<br/>'):''" class="rowcontent">

							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<Footer></Footer>
	</div>
</template>

<script>
	import Header from '../../components/common/header/Header.vue'
	import Navigation from '../../components/common/navigation/Navigation.vue'
	import Footer from '../../components/common/footer/Footer.vue'
	import {
		corporateOverviewMenu
	} from '../../utils/menu.js'
	// 导入您需要的模块
	import Swiper from "swiper";
	export default {
		components: {
			Header,
			Navigation,
			Footer
		},
		data() {
			return {
				loading: true,
				bgImg: '', //头部banner，默认值已绑定，有背景自动切换
				bgColor: "white", //white/red
				menus: corporateOverviewMenu,
				breadcrumbItems: [{
						label: this.$t('home'),
						to: '/'
					},
					{
						label: this.$t('corporateOverview'),
						to: '/corporateOverview'
					},
					{
						label: this.$t('companyCulture'),
						to: '/companyCulture'
					}
				],
				hoverIndex: -1,
				data: {

					"title": " ",
					"coverImage": " ",
					"titleOne": " ",
					"contentOne": " ",
					"titleTwo": " ",
					"contentTwo": " ",
					"titleThree": " ",
					"contentThree": " "
				}

			};
		},
		computed: {},
		created() {},
		mounted() {
			this.initPage();
			this.bindBg();
			this.bindEnterpriseCulture();
		},
		methods: {

			/**
			 * (1)	2、获取企业文化
			 */
			bindEnterpriseCulture() {
				let params = {};
				let that = this;
				that.$request.getEnterpriseCulture(params).then(res => {
					this.data = res.data
					this.loading = false;
				}).catch((error) => {
					console.log(error);
				});

			},
			/**
			 * (1)	2、获取企业文化顶部背景
			 */
			bindBg() {
				let params = {};
				let that = this;
				that.$request.getEnterpriseCultureTopImage(params).then(res => {
					this.bgImg = this.$request.getImgUrl() + res.data.fileUrl
				}).catch((error) => {
					console.log(error);
				});

			},
			formatDate(date, format) {
				// 自定义日期格式化方法
				// 可以使用moment.js或其他日期处理库来进行格式化
			},

			initPage() {

			},
			gotoNewList() {
				this.$router.push({
					name: "党建新闻列表"
				});
			}

		}
	}
</script>

<style scoped>
	@import url("../../components/common/css/corporateOverview/companyProfile.css");

	.companyCultureArea {

		margin: auto;
		display: flex;
	}

	.companyCultureImgArea {
		width: 600px;
		height: 380px;

	}

	.row {
		flex: 1;
		overflow: hidden;

	}

	.midRow {
		margin: 47px 0;
	}

	.rowtitle {
		font-size: 16px;
		color: #0484D7;
		font-weight: 530;
	}

	.rowcontent {
		font-size: 14px;
		color: #666666;
		line-height: 2.125rem;
	}

	.companyCultureContent {

		height: 380px;
		overflow: hidden;
		padding-left: 30px;
		/* padding-top: 10px; */
		/* border: 1px dashed #dedede; */
		/* 	border-radius: 0px 10px 10px 0px; */
		/* 	border-left: 0px; */

		display: flex;
		flex-direction: column;

	}

	


	.content {
		min-height: 0px;
	}

	.content_bg {
		margin: 0px auto;
		padding: 0px;

	}

	@media (min-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2560px) {
		.content_bg {
			width: calc(2560px * 0.8);
		}
	}

	@media (max-width: 2320px) {
		.content_bg {
			width: calc(2320px * 0.8);
		}
	}

	@media (max-width: 2120px) {
		.content_bg {
			width: calc(2120px * 0.8);
		}
	}

	@media (max-width: 1920px) {
		.content_bg {
			width: calc(1920px * 0.8);
		}

		.companyCultureImgArea {
			width: 60%;
		}

		.companyCultureContent {}

	}

	@media (max-width: 1720px) {


		.content_bg {
			width: calc(1720px * 0.8);
		}
	}

	@media (max-width: 1520px) {
		.content_bg {
			width: calc(1520px * 0.8);
		}
	}

	@media (max-width: 1366px) {
		.content_bg {
			width: calc(1366px * 0.8);
		}
	}

	@media (max-width: 1120px) {
		.content_bg {
			width: 100%
		}
	}

	@media (max-width: 1024px) {}

	@media (max-width: 900px) {}
	@media (max-width: 768px) {
		.midRow {
			margin: 40px auto;
			min-width: 280px
		}
	
		.row {
			min-width: 280px;
			margin: 0 auto;
			text-align: left;
		}
	
		.companyCultureArea {
			width: 100%;
			flex-direction: column;
		}
	
		.companyCultureImgArea {
			width: 72%;
			height: auto;
			/* margin-right: 20px; */
		}
	
		.companyCultureContent {
			width: 100%;
			padding: 10px;
		}
	}
		@media (max-width: 440px) {
			.companyCultureImgArea{
				width: 100%;
				padding: 10px;
			}
			.companyCultureContent .row{
				margin: 0px;
			}
		}
</style>
